<template>
  <div>
    <el-dialog title="审核" :visible.sync="dialog" width="30%" @close="cancel">
      <div class="dialog-content">
        审核结果&nbsp;&nbsp;&nbsp;
        <el-radio v-model="audit" :label="1">审核通过</el-radio>
        <el-radio v-model="audit" :label="0">审核驳回</el-radio>
      </div>
      <div v-if="!audit">
        <div class="dialog-content">驳回原因:</div>
        <el-radio-group v-model="radio">
          <div class="dialog-content radio" v-for="i in reasonList" :key="i.value">
            <el-radio :label="i.value">{{i.label}}</el-radio>
          </div>
        </el-radio-group>
        <div class="dialog-content">
          <el-input
            :disabled="radio===4?false:true"
            type="textarea"
            :rows="4"
            placeholder="请输入驳回原因"
            v-model.trim="reason"
            :maxlength="200"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancel()">取 消</el-button>
        <el-button type="primary" size="small" @click="submit()">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 审核弹窗
import { auditMerchant } from '@/api/merchant-examine/examine'
export default {
  props: {
    ID: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      audit: 1,
      radio: null,
      reason: '',
      reasonList: [
        {
          value: 0,
          label: '法人身份证上姓名与营业执照不一样'
        },
        {
          value: 1,
          label: '银行卡照片号码与填写的银行卡号不一样'
        },
        {
          value: 2,
          label: '执照经营内容与实际经营内容不一致'
        },
        {
          value: 3,
          label: '身份证过有效期'
        },
        {
          value: 4,
          label: '其他原因'
        }
      ],
      dialog: false
    }
  },
  methods: {
    cancel() {
      this.dialog = false
      this.audit = 1
      this.radio = null
      this.reason = ''
    },
    openDialog() {
      this.dialog = true
    },
    submit() {
      let reason
      if (!this.audit) {
        if (this.radio === null) {
          this.$message({
            type: 'warning',
            message: '请填写驳回原因'
          })
          return
        }
        reason =
          this.radio === 4 ? this.reason : this.reasonList[this.radio].label
      }
      let param = {
        id: this.ID,
        params: {
          audit: this.audit,
          reason: reason || ''
        }
      }
      auditMerchant(param).then(res => {
        if (this.audit) {
          this.$parent.callback(this.ID)
        }
        this.cancel()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-content {
  min-height: 40px;
}
.radio {
  display: flex;
  justify-content: flex-start;
}
.dialog-footer {
  margin: 0 auto;
  margin-top: 20px;
  width: 200px;
  display: flex;
  justify-content: space-between;
}
</style>